.svg-icon {
    display: inline-block;
    width: 134px;
    height: 138px;
    //margin: 40px 30px;
    float: left;
	}
	.svg-icon:hover { cursor: pointer }
	
	.flat-line {
		display: inline-block;
		width: 100px;
		height: 100px;
		//margin: 40px 30px;
	}
	
	/*Genral*/
	.flat-line .icon > path {
		stroke: #fff;
		stroke-width: 3px;
		fill: transparent;
		transform: translate(0px, 0px) scale(1,1);
		-webkit-transform: translate(0px ,0px) scale(1,1);
		-moz-transform: translate(0px ,0px) scale(1,1);
	}
	.flat-line .circle {
		stroke: #fff;
		stroke-width: 3px;
		fill: #52be7f;
		transform: translate(0px, 0px) scale(1,1);
		-webkit-transform: translate(0px ,0px) scale(1,1);
		-moz-transform: translate(0px ,0px) scale(1,1);
	}
	/*Exceptions*/
	.flat-line .icon > .lightning {
		stroke: #fff;
		stroke-width: 1.5px;
		fill: transparent;
		transform: translate(0px, 0px) scale(1,1);
		-webkit-transform: translate(0px ,0px) scale(1,1);
		-moz-transform: translate(0px ,0px) scale(1,1);
	}
	
	/*=============================================
[ Hover Styles ]
==============================================*/
.flat-line:hover .icon {
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    /*animation-name*/
    -webkit-animation-name: line-burst;
    -moz-animation-name: line-burst;
    -ms-animation-name: line-burst;
    -o-animation-name: line-burst;
    animation-name: line-burst;
    /*animation-duration*/
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -ms-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    /*transform-origin*/
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px !important;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.flat-line:hover .icon > path {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover .circle {
    stroke: transparent;
    stroke-width: 0px;
}
/*Exceptions*/
.flat-line:hover .icon > .lightning {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-user .collar_right {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover#line-user .collar_left {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-lightning .bolt {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-lightning .highlight {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-mic .bars_right rect {
    stroke: transparent;
    stroke-width: 0px;
}
.flat-line:hover #line-coffee .top {
    stroke: transparent;
    stroke-width: 0px;
}

#line-email .paper {
    fill: transparent;
    stroke-width: 0px;
}
#line-email .text {
    fill: transparent;
    stroke-width: 0px;
}
#line-email:hover .circle { fill: #7D79BC }
#line-email:hover .top { fill: #3DD97F }
#line-email:hover .paper { fill: #FFFFFF }
#line-email:hover .base { fill: #2DB466 }
#line-email:hover .text { fill: #BBBBBB }

#line-message .dots {
    fill: transparent;
    stroke-width: 0px;
}

#line-message:hover .circle { fill: #AC5D9F }
#line-message:hover .back { fill: #FFAD10 }
#line-message:hover .front { fill: #00A3C6 }
#line-message:hover .dots { fill: #006A81 }

#line-pencil .metal {
    fill: #FFF;
    stroke-width: 0px;
}

#line-pencil:hover .circle { fill: #CDEFE1 }
#line-pencil:hover .wood { fill: #FFC833 }
#line-pencil:hover .base_top { fill: #456FD8 }
#line-pencil:hover .base_bottom { fill: #3258B6 }
#line-pencil:hover .base_middle { fill: #567FE5 }
#line-pencil:hover .tip { fill: #567FE5 }
#line-pencil:hover .eraser { fill: #FF72B1 }
#line-pencil:hover .metal { fill: #C6C6C6 }

#line-mic .bars_right rect {
    fill: #52be7f;
    transform: translate(0px, 0px) scale(1,1);
    -webkit-transform: translate(0px ,0px) scale(1,1);
    -moz-transform: translate(0px ,0px) scale(1,1);
}

#line-mic .bars_left {
    fill: #FFF;
    stroke-width: 0px;
}
#line-mic .bars_right rect {
    fill: #FFF;
    stroke-width: 0px;
}

#line-mic:hover .circle { fill: #F3CF3F }
#line-mic:hover .base { fill: #40979F }
#line-mic:hover .stand { fill: #5F8083 }
#line-mic:hover .bars_left { fill: #267178 }
#line-mic:hover .bars_right rect { fill: #267178 }

@-webkit-keyframes line-burst { 
     {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-in;
    }
    37% {
        -webkit-transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    55% {
        -webkit-transform: scale(1.17);
        animation-timing-function: ease-in;
    }
    73% {
        -webkit-transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    82% {
        -webkit-transform: scale(1.2);
        animation-timing-function: ease-in;
    }
    91% {
        -webkit-transform: scale(1.3);
        animation-timing-function: ease-out;
    }
    96% {
        -webkit-transform: scale(1.2);
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1.1);
        animation-timing-function: ease-out;
    }
}
@-moz-keyframes line-burst { 
     {
        -moz-transform: scale(1,1);
        animation-timing-function: ease-in;
    }
    37% {
        -moz-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    55% {
        -moz-transform: scale(1.37,1.37);
        animation-timing-function: ease-in;
    }
    73% {
        -moz-transform: scale(1,1);
        animation-timing-function: ease-out;
    }
    82% {
        -moz-transform: scale(1.45,1.45);
        animation-timing-function: ease-in;
    }
    91% {
        -moz-transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    96% {
        -moz-transform: scale(1.4,1.4);
        animation-timing-function: ease-in;
    }
    100% {
        -moz-transform: scale(1,1);
        animation-timing-function: ease-in;
    }
}
@keyframes line-burst { 
     {
        transform: scale(1,1);
        animation-timing-function: ease-in;
    }
    37% {
        transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    55% {
        transform: scale(1.37,1.37);
        animation-timing-function: ease-in;
    }
    73% {
        transform: scale(1,1);
        animation-timing-function: ease-out;
    }
    82% {
        transform: scale(1.45,1.45);
        animation-timing-function: ease-in;
    }
    91% {
        transform: scale(1.5,1.5);
        animation-timing-function: ease-out;
    }
    96% {
        transform: scale(1.4,1.4);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1,1);
        animation-timing-function: ease-out;
    }
}

.spinner {
  margin : 0px auto 10px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
	transform: scaleY(0.4);
	-webkit-transform: scaleY(0.4);
  }  20% {
	transform: scaleY(1.0);
	-webkit-transform: scaleY(1.0);
  }
}